<template>
  <div>


    <div style="width: 100%">
      &emsp;&emsp;
      <div>
        <el-button @click="showAdd">添加靶场</el-button>

        <el-col :span="8">
          <el-input placeholder="请输入靶场名称" clearable v-model="input">
            <el-button slot="append" icon="el-icon-search" @click="initAllTestDetail"></el-button>
          </el-input>
        </el-col>
      </div>
      <br>

      <div class="col-sm-6 col-md-4" >
        <div class="thumbnail row" v-for="testDetail in testVo">
          <img :src="testDetail.testPictureUrl" alt="..." class="col-sm-6 col-md-6"
               style="width: 140px;height: 130px">
          <div class="caption text-left">
            <p>靶场名称:<span v-text="testDetail.testName">n</span></p>
            <p>靶场简介:<span v-text="testDetail.simpleNote">name</span></p>
            <p>难度等级:<span v-text="testDetail.difficulty">name</span></p>
            <el-row>
              <el-button type="danger" size="small" @click="deleteTestDetail(testDetail.testCode)" plain>删除靶场
              </el-button>
              <el-button type="primary" size="small" @click="showUpdate(testDetail.testCode)" plain>修改靶场</el-button>
            </el-row>
          </div>

        </div>

      </div>
    </div>
    <el-pagination id="page"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-size="size"
                   layout="total, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>


    <updateTestDetail
        :updateDetail="updateShow"
        :visible.sync="updateShow"
        :test-id="updateTestCode"
        @initList="initAllTestDetail"
    >
    </updateTestDetail>
    <add-test-detail
        :add-detail="addShow"
        :visible.sync="addShow"
        @initAll="initAllTestDetail"
    >
    </add-test-detail>

  </div>
</template>

<script>


export default {
  name: "allTestDetail",
  components: {
    addTestDetail: () => import('@/views/testDetail/addTestDetail.vue'),
    updateTestDetail: () => import('@/views/testDetail/updateTestDetail.vue')
  },
  data() {
    return {
      input: "",
      currentPage: 1,
      size: 4,
      total: 0,
      testVo: [{
        testCode: 0,
        testName: '',
        simpleNote: '',
        testPictureUrl: '',
        testUrl: '',
        difficulty: '',
        courseUrl: ''
      }],
      allShow:false,
      updateShow: false,
      addShow: false,
      updateTestCode: ""
    }
  },

  methods: {

    showUpdate(testCode) {
      this.updateTestCode = testCode
      this.updateShow = true;
    },
    showAdd() {
      this.addShow = true;
    },


    initAllTestDetail() {
      this.updateTestCode = 0;
      let params = {
        currentPage: this.currentPage,
        size: this.size,
        input: this.input
      }
      this.$axios.postForm("/testDetail/getAllTestDetail", params)
          .then(response => {
            let responseData = response.data
            if (responseData.code == 200) {
              let pageData = responseData.data;
              this.testVo = pageData.pageVo
              this.currentPage = pageData.currentPage;
              this.size = pageData.size;
              this.total = pageData.total;
            } else {
              let pageData = responseData.data;
              this.testVo = pageData.pageVo
              this.$message({
                message: responseData.msg,
                type: 'error',
                duration: 2000
              })
            }
          })
    },
    handleSizeChange(size) {
      this.size = size;
      this.currentPage = 1;
      this.initAllTestDetail();
    }
    ,
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initAllTestDetail();
    }
    ,
    deleteTestDetail(testCode) {
      this.$confirm('此操作将永久删除靶场,是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.postForm("/testDetail/deleteTestDetail", {testCode: testCode})
            .then(response => {
              let responseData = response.data
              if (responseData.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                  duration: 2000
                });
                this.initAllTestDetail()
              } else {
                this.$message({
                  type: 'error',
                  message: responseData.msg,
                  duration: 2000
                });
                this.initAllTestDetail()
              }
            })
      })
    }
  },
  created() {
    this.initAllTestDetail()
  }

}
</script>
<style scoped>
#page {
  position: absolute;
  top: 550px;
  left: 550px;
}

.row {
  float: left;
  width: 300px;
}
</style>